import React from "react";
import { DashboardGrid } from "./dashboard";

const Home: React.FC = () => {
  return (
    <>
      {/* 全局样式 */}
      <style>{`
        /* 全局滚动条样式 - 只在悬浮时显示 */
        html, body {
          scrollbar-width: thin;
          scrollbar-color: transparent transparent;
          transition: scrollbar-color 0.3s ease;
        }
        
        html:hover, body:hover {
          scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
        }
        
        /* Webkit 滚动条样式 */
        html::-webkit-scrollbar, body::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        
        html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
          background: transparent;
          border-radius: 4px;
        }
        
        html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
          background: transparent;
          border-radius: 4px;
          transition: background 0.3s ease;
        }
        
        html:hover::-webkit-scrollbar-thumb, body:hover::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.3);
        }
        
        html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
          background: rgba(0, 0, 0, 0.5) !important;
        }

        /* 全局滚动条样式 - 只在悬浮时显示 */
        * {
          scrollbar-width: thin;
          scrollbar-color: transparent transparent;
          transition: scrollbar-color 0.3s ease;
        }
        
        *:hover {
          scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
        }
        
        /* Webkit 滚动条样式 */
        *::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        
        *::-webkit-scrollbar-track {
          background: transparent;
          border-radius: 4px;
        }
        
        *::-webkit-scrollbar-thumb {
          background: transparent;
          border-radius: 4px;
          transition: background 0.3s ease;
        }
        
        *:hover::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.3);
        }
        
        *::-webkit-scrollbar-thumb:hover {
          background: rgba(0, 0, 0, 0.5) !important;
        }
        
        /* Antd 组件特殊处理 */
        .ant-drawer-body::-webkit-scrollbar-thumb,
        .ant-list::-webkit-scrollbar-thumb,
        .ant-card-body::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.2);
        }
        
        .ant-drawer-body:hover::-webkit-scrollbar-thumb,
        .ant-list:hover::-webkit-scrollbar-thumb,
        .ant-card-body:hover::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.4);
        }

        /* Dashboard网格样式 */
        .dashboard-grid .react-grid-item {
          transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
          transition-property: left, top, width, height;
        }
        
        .dashboard-grid .react-grid-item.cssTransforms {
          transition-property: transform, width, height;
        }
        
        .dashboard-grid .react-grid-item:hover {
          transform: translateY(-2px);
          filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1));
        }
        
        .dashboard-grid .react-grid-item > .react-resizable-handle {
          position: absolute;
          width: 24px;
          height: 24px;
          bottom: 0;
          right: 0;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 8px 0 12px 0;
          cursor: se-resize;
          opacity: 0.6;
          transition: all 200ms ease;
        }
        
        .dashboard-grid .react-grid-item > .react-resizable-handle:hover {
          opacity: 1;
          transform: scale(1.1);
        }
        
        .dashboard-grid .react-grid-item > .react-resizable-handle::after {
          content: '';
          position: absolute;
          bottom: 3px;
          right: 3px;
          width: 8px;
          height: 8px;
          background: url('');
          background-size: contain;
        }

        /* Widget容器样式 */
        .widget-container {
          height: 100%;
        }
        
        .widget-container .ant-card {
          height: 100%;
          display: flex;
          flex-direction: column;
          border-radius: 16px !important;
          border: 2px solid rgba(255, 255, 255, 0.8) !important;
          background: rgba(255, 255, 255, 0.95) !important;
          backdrop-filter: blur(20px) !important;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
          transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
          overflow: hidden !important;
        }
        
        .widget-container .ant-card:hover {
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
          border-color: rgba(255, 255, 255, 1) !important;
          transform: translateY(-2px) !important;
        }
        
        .widget-container .ant-card-head {
          border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
          border-radius: 16px 16px 0 0 !important;
          background: rgba(255, 255, 255, 0.9) !important;
          backdrop-filter: blur(20px) !important;
          flex-shrink: 0 !important;
        }
        
        .widget-container .ant-card-body {
          flex: 1;
          border-radius: 0 0 16px 16px !important;
          background: rgba(255, 255, 255, 0.95) !important;
        }
        
        /* 占位模块特殊样式 - 不使用卡片样式 */
        .widget-container[data-widget="placeholder"] .ant-card {
          border: none !important;
          background: transparent !important;
          backdrop-filter: none !important;
          box-shadow: none !important;
          padding: 0 !important;
        }
        
        .widget-container[data-widget="placeholder"] .ant-card-head {
          display: none !important;
        }
        
        .widget-container[data-widget="placeholder"] .ant-card-body {
          padding: 0 !important;
          background: transparent !important;
        }
        
        /* 自定义模式下的特殊效果 */
        .dashboard-grid.customizing .react-grid-item {
          border: 2px dashed rgba(102, 126, 234, 0.3);
          border-radius: 16px;
          background: rgba(102, 126, 234, 0.05);
        }
        
        .dashboard-grid.customizing .react-grid-item:hover {
          border-color: rgba(102, 126, 234, 0.6);
          background: rgba(102, 126, 234, 0.1);
        }
      `}</style>
      
      <div className="p-6">
        <DashboardGrid />
      </div>
    </>
  );
};

export default Home;
